import React, { memo, useEffect, useState } from 'react'
import "../../assets/Layout/konjian.scss";
import { Avatar, Menu } from 'antd'
import type { MenuProps } from 'antd';
import {Outlet} from "react-router";
import {useNavigate} from "react-router";
import { UserOutlined,MailOutlined,AppstoreOutlined } from '@ant-design/icons';
type MenuItem = Required<MenuProps>['items'][number];


function KonJian(){
  const navigate = useNavigate();
  const items: MenuItem[] = [
    {
      label: '主页',
      key: '/konJian/zhuye',
    },
    {
      label: '日志',
      key: '/konJian/Rizhi',
    },
    {
      label: '相册',
      key: '/konJian/XiangCe',
    },

  ];
  const closeFun = ()=>{
    window.electron.ipcRenderer.send("win-closed")
  }
  const  maxFun = ()=>{
    window.electron.ipcRenderer.send("window-max")
  }
  const  minFun = ()=>{
    window.electron.ipcRenderer.send("window-min")
  }
  const [isWin,setIsWin] = useState(false)
  let url = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2';

  const [current, setCurrent] = useState('mail');

  useEffect(()=>{
    window.electron.ipcRenderer.send("isWin")
    window.electron.ipcRenderer.on('msg',(event,msg)=>{
      console.log(msg)
      setIsWin(!msg)
    })
  })
  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    setCurrent(e.key);
    navigate(e.key)
  };
  return <>
     <div className="konjian-top">
       {
         isWin? <div className="meun-tool-r">
           <div onClick={minFun} className="meun-but"><i className="iconfont mt-jianhao"></i></div>
           <div onClick={maxFun} className="meun-but"><i className="iconfont mt-square"></i></div>
           <div onClick={closeFun} className="meun-but"><i className="iconfont mt-guanbi"></i></div>
         </div>:""
       }
     </div>
    <div className="konjian-user-box">
         <div className="kj-Avatar">
           <Avatar shape="square" size={60} src={url} />
         </div>
        <div className="kj-r">
          <div className="kj-name">用户名称</div>
          <div className="kj-meun">
            <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
          </div>
        </div>
    </div>
    <div className="konjian-mian">
      <Outlet></Outlet>
    </div>
  </>

}

export default  memo(KonJian);
